<template>
  <div class="ratings">
    <div class="ratings-content">
      <div class="overview">
        <div class="overview-left">
          <h1 class="score">{{shopInfo.score}}</h1>
          <div class="title">综合评分</div>
          <div class="rank">高于周边商家90%</div>
        </div>
        <div class="overview-right">
          <div class="score-wrapper">
            <span class="title">服务态度</span>
						<Start :size="36" :score="shopInfo.serviceScore"></Start>
            <span class="score">{{shopInfo.serviceScore}}</span>
          </div>
          <div class="score-wrapper">
            <span class="title">商品评分</span>
            <Start :size="36" :score="shopInfo.foodScore"></Start>
            <span class="score">{{shopInfo.foodScore}}</span></div>
          <div class="delivery-wrapper">
            <span class="title">送达时间</span>
            <span class="delivery">{{shopInfo.deliveryTime}}分钟</span>
          </div>
        </div>
      </div>

      <div class="split"></div>

			<RatingSelect :rating="shopRatings" @onlyText="getOnlyText" @filter="getFilter"></RatingSelect>

      <div class="rating-wrapper">
        <ul>
          <li class="rating-item" v-for="rating,index in filterRatings" :key="index">
            <div class="avatar">
              <img width="28" height="28" :src="rating.avatar">
            </div>
            <div class="content">
              <h1 class="name">{{rating.username}}</h1>
              <div class="star-wrapper">
								<Start :size="24" :score="rating.score"></Start>
                <span class="delivery">{{rating.deliveryTime}}</span>
              </div>
              <p class="text">{{rating.text}}</p>
              <div class="recommend">
                <span class="iconfont" :class="rating.rateType === 0 ? 'icon-tuijian' : 'icon-shoushi-tucao' "></span>
								<span class="item" v-for="item,index in rating.recommend" :key="index">{{item}}</span>
							</div>
              <div class="time">
								<!-- 调用过滤器 -->
								{{rating.rateTime | dataFormat}}
							</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>



<script>
	// 导入深拷贝依赖
	import _ from 'lodash'
	import BScroll from 'better-scroll'
	import Start from '../../components/Star/Star.vue'
	import RatingSelect from '../../components/RatingSelect/RatingSelect.vue'
	export default {
		data() {
			return {
				// 商家信息对象
				shopInfo: {},
				// 商品评价数组
				shopRatings: [],
				filter: 2,
				onlyText: true
			}
		},
		created() {
			this.getShopInfo()
			this.getShopRatings()
		},
		computed: {
			// 产生一个新的数组
			filterRatings() {
					// 从 this.shopRatings 中结构出 rateType 和 text
					const { rateType, text } = this.shopRatings
					let arr = []
					
					// 显示全部文本可以为空
					if(this.filter === 2 && this.onlyText === false) {
						arr = []
						this.shopRatings.forEach(item => {
							arr.push(item)
						})
					}
					
					// 显示全部文本不可以为空
					if(this.filter === 2 && this.onlyText === true) {
						arr = []
						this.shopRatings.forEach(item => {
							if(item.text) {
								arr.push(item)
							}
						})
					}
					
					// 显示好评文本可以为空
					if(this.filter === 0 && this.onlyText === false) {
						arr = []
						this.shopRatings.forEach(item => {
							if(item.rateType === 0) {
								arr.push(item)
							}
						})
					}
					
					// 显示好评文本不可以为空
					if(this.filter === 0 && this.onlyText === true) {
						arr = []
						this.shopRatings.forEach(item => {
							if(item.rateType === 0 && item.text) {
								arr.push(item)
							}
						})
					}
					
					// 显示吐槽文本可以为空
					if(this.filter === 1 && this.onlyText === false) {
						arr = []
						this.shopRatings.forEach(item => {
							if(item.rateType === 1) {
								arr.push(item)
							}
						})
					}
					
					// 显示吐槽文本不可以为空
					if(this.filter === 1 && this.onlyText === true) {
						arr = []
						this.shopRatings.forEach(item => {
							if(item.rateType === 1 && item.text) {
								arr.push(item)
							}
						})
					}
					
					
					return arr
					
					
					
					/* 
						条件1：this.filter: 2
						条件2：this.onlyText: true/false
					*/
				 
				 /*
				 	条件1：this.filter: 0
				 	条件2：this.onlyText: true/false
				 */
					
					/*
						条件1：this.filter: 1
						条件2：this.onlyText: true/false
					*/
					
				 
			}
		},
		methods: {
			// 获取商家信息
			async getShopInfo() {
				const {	data : res } =	await this.$http.get('/shop_info')
				console.log('商家信息',res)
				
				if(res.code !== 0) return console.log('获取商品列表失败')
				
				this.shopInfo = res.data
			},
			// 获取评价信息
			async getShopRatings() {
				const {	data : res } =	await this.$http.get('/shop_ratings')
				console.log('评价',res)
				
				if(res.code !== 0) return console.log('获取商品列表失败')
				
				this.shopRatings = res.data
				
				// 深拷贝
				// this.filterRatings =	_.cloneDeep(this.shopRatings)
				
				
			},
			getOnlyText(val) {
				console.log(val)
				this.onlyText = val
			},
			getFilter(val) {
				this.filter = val
				console.log(val)
			}
		},
		components: {
			Start,
			RatingSelect
		},
		watch: {
			filterRatings(newVal) {
				this.$nextTick(() => {
					// 挂载单例BScroll
					if(!this.BScroll) {
						this.BScroll = new BScroll('.ratings', {
							click: true
						})
					}else {
						this.BScroll.refresh()
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.ratings{
		position: absolute;
		top: 252px;
		bottom: 0;
		left: 0;
		width: 100%;
		overflow: hidden;
		background: #fff;
		.overview{
			display: flex;
			padding: 18px 0;
			background: #fff;
			.overview-left{
				flex: 0 0 137px;
				padding: 6px 0;
				width: 137px;
				border-right: 1px solid rgba(7, 17, 27, 0.1);
				text-align: center;
				@media only screen and (max-width: 320px){
					flex: 0 0 120px;
					width: 120px;
				}
				.score{
					margin-bottom: 6px;
					line-height: 28px;
					font-size: 24px;
					color: rgb(255, 153, 0);
				}
				.title{
					margin-bottom: 8px;
					line-height: 12px;
					font-size: 12px;
					color: rgb(7, 17, 27);
				}
				.rank{
					line-height: 10px;
					font-size: 10px;
					color: rgb(147, 153, 159);
				}
			}
			.overview-right{
				flex: 1;
				padding: 6px 0 6px 24px;
				@media only screen and (max-width: 320px){
					padding-left: 6px;
				}
				.score-wrapper{
					margin-bottom: 8px;
					font-size: 0;
					.title{
						display: inline-block;	
						line-height: 18px;
						vertical-align: top;
						font-size: 12px;
						color: rgb(7, 17, 27);
					}
					.star{
						display: inline-block;
						margin: 0 12px;
						vertical-align: top;
					}
					.score{
						display: inline-block;
						line-height: 18px;
						vertical-align: top;
						font-size: 12px;
						color: rgb(255, 153, 0);
					}
				}
				.delivery-wrapper{
					font-size: 0;
					.title{
						line-height: 18px;
						font-size: 12px;
						color: rgb(7, 17, 27);
					}
					.delivery{
						margin-left: 12px;
						font-size: 12px;
						color: rgb(147, 153, 159);
					}
				}
			}
		}
		.rating-wrapper{
			padding: 0 18px;
			.rating-item{
				display: flex;
				padding: 18px 0;
				border-bottom: 1px solid rgba(7, 17, 27, 0.1);
				.avatar{
					flex: 0 0 28px;
					width: 28px;
					margin-right: 12px;
					img{
						border-radius: 50%;
					}
				}
				.content{
					position: relative;
					flex: 1;
					.name{
						margin-bottom: 4px;
						line-height: 12px;
						font-size: 10px;
						color: rgb(7, 17, 27);
					}
					.star-wrapper{
						margin-bottom: 6px;
						font-size: 0;
						.star{
							display: inline-block;
							margin-right: 6px;
							vertical-align: top;
						}
						.delivery{
							display: inline-block;
							vertical-align: top;
							line-height: 12px;
							font-size: 10px;
							color: rgb(147, 153, 159);
						}
					}
					.text{
						margin-bottom: 8px;
						line-height: 18px;
						color: rgb(7, 17, 27);
						font-size: 12px;
					}
					.recommend{
						line-height: 16px;
						font-size: 0;
						.icon-tuijian, .icon-shoushi-tucao, .item{
							display: inline-block;
							margin: 0 8px 4px 0;
							font-size: 9px;
						}
						.icon-tuijian{
							color: #FF9A0D;
						}
						.icon-shoushi-tucao{
							color: rgb(147, 153, 159);
						}
						.item{
							padding: 0 6px;
							border: 1px solid rgba(7, 17, 27, 0.1);
							border-radius: 1px;
							color: rgb(147, 153, 159);
							background: #fff;
						}
					}
					.time{
						position: absolute;
						top: 0;
						right: 0;
						line-height: 12px;
						font-size: 10px;
						color: rgb(147, 153, 159);
					}
				}
			}
		}
	}
	


</style>
